Xamarin.Forms Visual の Material デザインを試してみた

Xamarin.Forms Visual の Material デザインを試してみた

Xamarin.Formsのバージョン3.6で追加された「Xamarin.Forms Visual」を試してみました。 AndroidとiOSが同じようなマテリアルデザインになります！
#iOS
#Android
#Xamarin
#Xamarin.Forms
藤井元貴

藤井元貴

facebook logohatena logotwitter logo
Clock Icon2019.08.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Xamarin.Formsのバージョン3.6で Xamarin.Forms Visualが使えるようになりました。

「AndroidとiOSが同じようなUIになる」みたいなので、遅まきながら試してみました。

目次

環境

  • Windows
    • Windows 10 Pro
    • Visual Studio Community 2019: 16.2.1
  • macOS
    • macOS Mojave 10.14.5
    • Visutal Studio Community 2019 for Mac: 8.2.2
    • Xcode: 10.2.1
  • Android
    • Pixel 3a: Android 9
  • iOS Simulator
    • iPhone Xs: iOS 12.2
  • Xamarin
    • Xamarin: 16.2.0.91
    • Xamarin.Android SDK: 9.4.1.0
    • Xamarin.iOS and Xamarin.Mac SDK: 12.14.0.114
  • Library
    • Xamarin.Forms: 4.1.0.673156

Xamarin.Forms プロジェクトの新規作成

Xamarin.Formsプロジェクトを新規作成します。

Xamarin.Formsプロジェクトを新規作成する

テンプレートは「空白」にします。

テンプレートは「空白」を選択する

様子を見る（Visualの指定：なし）

いつもの表示ですね。

Android

いつものボタン(Android)

iOS

いつものボタン(iOS)

Xamarin.FormsのVisualを試す

Androidの要件

Androidの場合は、下記が必要です。

  • FormsAppCompatActivity
  • Android Support Libraries 28.0.0 以上
  • Target Android framework (v9.0 以上)
  • Minimum Android Version 5.0 (API 21) 以上

Xamarin.Forms.Visual.Materialを追加

NuGetでXamarin.Forms.Visual.Materialを検索し、すべてのプロジェクトに追加します。

Xamarin.Formsが古くてインストール出来ない場合は、Xamarin.Formsを最新にすればOKです。

Xamarin.Forms.Visual.Materialをインストールする

Androidの初期化

MainActivity.csにFormsMaterial.Init(this, savedInstanceState);を追加します。

（using Xamarin.Forms;が必要です）

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
FormsMaterial.Init(this, savedInstanceState);

iOSの初期化

AppDelegate.csにFormsMaterial.Init();を追加します。

（using Xamarin.Forms;が必要です）

global::Xamarin.Forms.Forms.Init();
FormsMaterial.Init();

MainPageを修正

MainPage.xamlを修正します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Visual="Material"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
    </StackLayout>

</ContentPage>

様子を見る（Visualの指定：Material）

それっぽくなりました！　AndroidとiOSで同じような見た目です！

Android

Materialボタン(Android)

iOS

Materialボタン(iOS)

カスタマイズしてみる（自分で頑張る）

ボタンの背景色を黒以外にしたいと思い、公式ドキュメントに従って試してみました。

共通プロジェクトに型を作る

共通プロジェクトにMyCustomVisual.csを作成します。中身はIVisualを継承しているだけです。

using Xamarin.Forms;

namespace XFVisualSample
{
    public class MyCustomVisual : IVisual
    {
    }
}

Androidのカスタムレンダラーを作成する

AndroidプロジェクトにMyCustomButtonRenderer.csを作成します。

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XFVisualSample;
using XFVisualSample.Droid;
using ButtonRenderer = Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(MyCustomButtonRenderer), new[] { typeof(MyCustomVisual) })]
namespace XFVisualSample.Droid
{
    public class MyCustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.SetBackgroundColor(Color.LightCoral.ToAndroid());
            }
        }
    }
}

iOSのカスタムレンダラーを作成する

iOSプロジェクトにMyCustomButtonRenderer.csを作成します。

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XFVisualSample;
using XFVisualSample.iOS;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(MyCustomButtonRenderer), new[] { typeof(MyCustomVisual) })]
namespace XFVisualSample.iOS
{
    public class MyCustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.BackgroundColor = Color.LightCoral.ToUIColor();
            }
        }
    }
}

MainPageを修正

MainPage.xamlのVisualを修正します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Visual="MyCustom"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
    </StackLayout>

</ContentPage>

様子を見る（Visualの指定：MyCustom）

こうなりました。

Android

自分で頑張ったボタン(Android)

iOS

自分で頑張ったボタン(iOS)

どうしてこうなった

なんか思ってたんと違う……。

どうやら、自分で頑張る場合は、本当に色々と（カスタムレンダラーで）頑張らないとダメみたいです。

例えば、ボタンを押したときの「もわーん」というエフェクトも有りません（Androidでは、ボタンを押しても無反応……。）

ボタンを押したときの「もわ〜ん」が無い

カスタマイズしてみる（楽をする）

MainPageを修正

Visual="Material"でTextColorなどを設定すると、いいカンジになりました。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
        <Button Text="かきくけこ" Visual="MyCustom"/>
        <Button Text="さしすせそ" Visual="Material"/>
        <Button Text="たちつてと" Visual="Material" TextColor="Yellow" BackgroundColor="Green"/>
        <Button Text="なにぬねの" Visual="Material" TextColor="White" BackgroundColor="Brown"/>
        <Button Text="はひふへほ" Visual="Material" TextColor="DarkOrange" BackgroundColor="LightSkyBlue"/>
    </StackLayout>

</ContentPage>

様子を見る（Visualの指定：Material ＆ 色指定あり）

いいカンジです。ボタンを押しても「もわーん」が出ます！

Android

Materialで色指定したボタンのもわ〜ん(Android)

iOS

Materialで色指定したボタンのもわ〜ん(iOS)

さいごに

個人的に、iOSでも「ボタンはAndroidと同じようにしたい」と思っていたので、この機能はありがたいです。

まずは手軽に導入したいと思います。

参考

Share this article

facebook logohatena logotwitter logo

関連記事

[SwiftUI] iOS 17以降の@Environmentまとめ

[SwiftUI] iOS 17以降の@Environmentまとめ

User avatar
きんくま
2024.11.01
[SwiftUI] iOS16以降の@EnvironmentObjectとiOS17以降の@Environment

[SwiftUI] iOS16以降の@EnvironmentObjectとiOS17以降の@Environment

User avatar
きんくま
2024.11.01
[SwiftUI] iOS 16までのObservableObject, @ObservedObject, @StateObject。iOS 17からの@Observable

[SwiftUI] iOS 16までのObservableObject, @ObservedObject, @StateObject。iOS 17からの@Observable

User avatar
きんくま
2024.10.31
xcodebuildを使ってiOSシミュレータランタイムをダウンロード・インストールする

xcodebuildを使ってiOSシミュレータランタイムをダウンロード・インストールする

User avatar
和田 健司
2024.10.28
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.